// 导入 axios 库
import axios from 'axios';
// 导入 React.Component 类
import { Component } from 'react';

class LoongAddView extends Component {
    render(){
        return (
            <div>
                <form onSubmit={this.handleSubmit}>
                    <input type="text" name="name" placeholder="姓名"/>
                    <input type="text" name="gender" placeholder="性别"/>
                    <input type="date" name="birthdate"/>
                    <input type="text" name="hometown" />
                    <button>添加</button>
                </form>
            </div>
        )
    }
    handleSubmit = evt => {
        evt.preventDefault();
        // 获得 事件目标 ( event target )
        const form = evt.target ;
        const { navigate } = this.props ;

        const params = {
            name: form.name.value ,
            gender: form.gender.value,
            birthdate: form.birthdate.value,
            hometown: form.hometown.value
        }

        const promise = axios.put( '/back/loong/add' , params );
        promise.then( resp => {
            // 解构赋值 (这里使用的属性名与后端路由返回的JSON字符串相对应)
            let { success, message , result } = resp.data ;
            if( success ) {
                navigate( '/class/list' ); // 编程式导航
                return; // 让方法立即结束
            }
            console.log( message , result );
        }).catch( reason => {
            console.log( reason );
        })
    }
}

export default LoongAddView;